<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script name="YeNan">
// setup 第一种写法
// import {ref} from 'vue'
// export default {
  // name:'person123',
//   setup() {
//     // setup 中的this是undefined，Vue3弱化了this的作用
//     let name ='张三'   //此时name还不是响应式数据
//     let age = 18    //此时name还不是响应式数据
//     function changeName() {
//       name = 'zhangsan'    //注意 此时这样修改name，页面是不会发生变化的
//       console.log('name', name)
//     }
//     function changeAge() {
//       age += 1   //注意 此时这样修改age，页面是不会发生变化的
//       console.log('age', age)
//     }
//     function showTel() {
//       alert('一层不染，如此简单')
//     }
//     return {
//       name,
//       age,
//       address,
//       changeName,
//       changeAge,
//       showTel
//     }
//   }
// }
</script>
<script setup name="YeNan">
// setup第二种写法
       //这样的写法会让组件丢失name属性，没法配置组件名的name，如果需要配置name有两张方法
      //    1、在含有setup的<script>标签上面添加一个<script>标签，进行vue2选项式配置
      //    2、利用项目插件，vite-plugin-vue-setup-extend插件，然后在vite.config.ts里进行配置，
      //       这种写法所有的<script>都必须添加相同的name属性，否则组件名不对，一般只有一个script标签

    let name ='张三123'   //此时name还不是响应式数据
    let age = 18    //此时name还不是响应式数据
    function changeName() {
      name = 'zhangsan'    //注意 此时这样修改name，页面是不会发生变化的
      console.log('name', name)
    }
    function changeAge() {
      age += 1   //注意 此时这样修改age，页面是不会发生变化的
      console.log('age', age)
    }
    function showTel() {
      alert('一层不染，如此简单')
    }
</script>

<style>
button {
  margin-left: 10px;
}
</style>